<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/jsp/component/common.jsp" %>
<html>
<head>
    <title>Title</title>
    <script type="text/javascript" src="../assets/js/echarts.js"></script>
    <link rel="stylesheet" href="${frames}/css/lib/bootstrap.min.css" type="text/css">
    <link rel="stylesheet" href="${assets}/css/views/department/addDepartment.scss">
    <script src="../assets/js/views/vue.min.js"></script>
    <%--<link rel="stylesheet" href="${frames}/css/paginate.css" type="text/css">--%>
    <script src="${js}/jquery-1.9.1.min.js"></script>
    <script src="${js}/jquery.dataTables.js"></script>
    <script src="${assets}/plugins/jquery-validation/jquery.validate.js" type="text/javascript"></script>
    <link href="../assets/css/bootstrap-datetimepicker.css" type="text/css">
    <script src="../assets/js/bootstrap-datetimepicker.min.js"></script>
    <script src="${frames}/Chronic/laydate/laydate.js"></script>
    <script src="${assets}/js/views/bpAbnormal.js"></script>
    <style>
        *{
            margin:0;
            padding:0;
        }
        html,body{
            height:100%;
        }
        body{
            width:98%;
        }
        h1{
            font-family: MicrosoftYaHei;
            font-size: 20px;
            font-weight: normal;
            color: #2a3137;
            margin-bottom: 26px;
            float: left;
            margin-top:0 !important
        }
        #main{
            width:370px;
            margin:0 auto;
            overflow:hidden;
            position:relative;
        }
        #main label{
            font-family: MicrosoftYaHei;
            font-size: 18px;
            font-weight: normal;
            font-stretch: normal;
            line-height: 30px;
            letter-spacing: 0px;
            color: #333333;
            width:75px;
            display:inline-block;
        }
        #main div{
            margin-bottom:20px;
        }
        .input{
            width: 260px;
            line-height: 19px;
            border: solid 1px #d0d0d0;
            display:inline-block;
            margin-left:16px;
            font-family: MicrosoftYaHei;
            font-size: 15px;
            font-weight: normal;
            font-stretch: normal;
            color: #999999 !important;
        }
        .bootstrapDatepickr-cal{
            top:250px !important;
        }
        .change{
            width:300px;
            margin:0 auto;
            margin-top:50px;
        }
        .btn {
            width: 100px;
            line-height: 15px;
            background: #35acfd;
            color: white;
            margin-top:15px;
        }
        .modal-footer{
            width:255px;
            margin:0 auto;
        }
        #keep{
            background:#35acfd !important;
        }
        /*.bootstrapDatepickr-cal{*/
        /*left:265px !important;*/
        /*}*/
        #beginDate{
            width:100%;
            line-height: 32px;
            border-radius: 5px;
            border: solid 1px #d0d0d0;
            font-size:15px;
            color:#999999 !important
        }
        .date div{
            margin-bottom:0 !important
        }
        .header{
            width:100%;
            overflow:hidden
        }
        #main input{
            text-indent:0.3em
        }
        .defualt{
            border:1px solid red !important;
        }
        .defualt{
            border:1px solid red !important;
        }
        #resetPsd label.error {
            color: Red;
            width:400px;
            font-size:12px;
        }
    </style>
</head>
<body>
<div class="header">
    <h1>添加检查项目</h1>
</div>
<div id="main">
    <form action="" id="resetPsd">
        <div class="number">
            <label>原密码</label>
            <input id="number" v-model="oldpassword" type="password"  placeholder="输入旧密码" class="form-control input">
        </div>
        <div class="times">
            <label>新密码</label>
            <input id="rate" name="rate" v-model="newpassword" type="password" placeholder="输入新密码" class="form-control input">
        </div>
        <div class="change">
            <div class="form-group submitBtn" style="text-align: center ">
                <button type="button" class="btn" data-dismiss="modal" id="closeModalButt" @click="closeFrame()">
                    关闭
                </button>
                <button type="submit" class="btn" id="keep"  @click="keep()" style="margin-left:20px;">保存</button>
            </div>
        </div>
    </form>
</div>

<script>
    var vm = new Vue({
        el:"#main",
        data:{
            oldpassword:'',
            newpassword:''
        },
        methods:{
            closeFrame : function() {
                window.parent.simpleCloseModal();
            },
            keep(){
                let that = this;
                if(that.oldpassword == '' ){
                    alert('原密码不能为空！')
                }
                if(that.newpassword == ''){
                    alert('新密码不能为空！')
                }
                if($('#resetPsd').valid()){
                    $.ajax({
                        url:'${URL_USER_UPDATEPASSWORD}',
                        data:{
                            oldPassword:that.oldpassword,
                            newPassword:that.newpassword
                        },
                        type:'post',
                        dataType:'json',
                        success:function(data){
                            if(data.success){
                                parent.showSrc('${URL_USER_TOUSERINFO}');

                                that.closeFrame()
                            }
                        }
                    })
                }


            }
        }
    })
</script>
<script>
    $("#resetPsd").validate({
        rules: {
            rate: {
                required: true,
                minlength: 8,
                maxlength: 20,
                psw:true
            }

        },
        messages: {
            rate: {
                required: "请输入新密码",
                minlength: "密码不能小于8个字符",
                maxlength: "密码不能大于20个字符"
            }
        }
    });

    jQuery.validator.addMethod("psw", function (value, element) {
        var lowVal = value.toLowerCase();
        var reg = /^((?!mk|meikang).)*$/;
        var reg1 = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>,.\/]){8,20}/;
        return this.optional(element) || (reg1.test(value) && reg.test(lowVal));
    }, $.validator.format("密码必须包含大小字母、数字和特殊字符，不能包含mk，meikang"));
</script>
</body>
</html>

